// recorder
.recorder {
  position: relative;
  width: $recorder-width;
  height: $recorder-height;
  padding-bottom: $recorder-padding-bottom;
  background: url('~images/recorder-bg.png') center 100px / 320px 205px no-repeat $recorder-bg-base;

  &.recording {
    background-image: none;
  }

  &__toolbar {
    position: absolute;
    display: table;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: $recorder-toolbar-height;

    .toolbar {
      &__item {
        display: table-cell;
        width: 1%;
        padding-top: $recorder-toolbar-padding-top;
        padding-bottom: $recorder-toolbar-padding-bottom;
        vertical-align: middle;
        background-color: $recorder-toolbar-bg-base;
        cursor: pointer;
        text-align: center;
        border-right: 1px solid lighten($recorder-toolbar-bg-base, 15%);

        + .toolbar__item {
          border-left: 1px solid darken($recorder-toolbar-bg-base, 15%);
        }
      }

      &__icon {
        display: inline-block;
        width: 34px;
        height: 32px;
        margin-bottom: 3px;
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;

        &--record {
          background-size: 100% auto;
          background-image: url('~images/icons/record.png');
        }

        &--pause {
          background-size: auto 100%;
          background-image: url('~images/icons/pause.png');
        }
      }

      &__label {
        display: block;
        margin: 0;
        font-weight: 400;
        font-size: $recorder-toolbar-font-size;
        color: $recorder-toolbar-color-base;
        line-height: 1;
        cursor: pointer;
      }
    }
  }
}